<template>
  <div class="login">
    <div class="login-form">
      <n-form ref="loginDom" :model="loginForm">
        <n-form-item path="username" label="用户名">
          <n-input class="login-input" v-model:value="loginForm.username" clearable type="text" placeholder="请输入用户名.."
            color="rgba(48, 125, 232, 0.5)" @keydown.enter.prevent />
        </n-form-item>
        <n-form-item path="password" label="密码">
          <n-input class="login-input" v-model:value="loginForm.password" clearable type="password" placeholder="请输入密码.."
            color="rgba(48, 125, 232, 0.5)" @keydown.enter.prevent />
        </n-form-item>
        <n-button class="login-button" round :loading="loading"
          :disabled="loginForm.username === null || loginForm.password === null" @click="loginHandleClick">
          登录
        </n-button>
      </n-form>
    </div>
  </div>
</template>

<script setup lang="js">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'

const $router = useRouter()
const userStore = useUserStore()

const loading = ref(false)
const loginDom = ref(null)
const loginForm = reactive({
  username: null,
  password: null,
})

function loginHandleClick() {
  console.info('username >>>> ' + loginForm.username)
  console.info('password >>>> ' + loginForm.password)
  loading.value = true
  $router.replace('/')
  loading.value = false
}

</script>

<style scoped lang="scss">
.login {
  width: 100%;
  height: 100%;
  background: #F3F9F1;
  background: url("@/assets/svg/login-bg.svg") no-repeat;
  background-size: cover;
  background-position: center;

  .login-form {
    width: 300px;
    height: 260px;
    // background: transparent;
    /* 设置四个角都是 5px 圆角 */
    border-radius: 5px;
    /* 设置边框 1px 及颜色 */
    border: 1px solid rgba(48, 125, 232, 0.5);
    padding: 20px 20px;
    /* 使用绝对定位 */
    position: absolute;
    /* 距离顶部 50% */
    top: 50%;
    /* 右侧对齐 10% */
    right: 10%;
    /* 向上偏移 50% 以居中 */
    transform: translateY(-50%);

    .login-button {
      margin-top: 10px;
      width: 100%;
      background: rgba(48, 125, 232, 1.0);
    }
  }
}
</style>